<!--
 * @Author: ChunLai
 * @Date: 2023-08-10 13:49:58
 * @LastEditTime: 2024-07-17 10:09:04
 * @Description: 高奖励/折价
 * @FilePath: \01.latest-short-insure\src\views\index\components\HighRewardTable.vue
-->
<template>
  <PopCommon
    popTitle="销售政策及价值系数"
    :popShow="showPop"
    @callback="showPop = false"
  >
    <div class="pop_box" slot="content">
      <p>政策时间 {{ getPolicyTimer }}</p>
      <div class="table_box">
        <table>
          <tr>
            <th rowspan="2">缴费<br />年期</th>
            <th rowspan="2">价值<br />系数</th>
            <th rowspan="2">引流津<br />贴比例</th>
            <th rowspan="2">转化津<br />贴比例</th>
            <th colspan="4">年度佣金比例</th>
          </tr>
          <tr>
            <th>第2年</th>
            <th>第3年</th>
            <th>第4年</th>
            <th>第5年</th>
          </tr>
          <tr v-for="(item, index) in highRewards" :key="`${index}`">
            <td>{{ item.insuranceDuration }}</td>
            <td>{{ formatValue(item.convertRatio) }}</td>
            <td>{{ formatValue(item.drainageBenefit) }}</td>
            <td>{{ formatValue(item.transformBenefit) }}</td>
            <td>{{ formatValue(item.otherChargesOne) }}</td>
            <td>{{ formatValue(item.otherChargesTwo) }}</td>
            <td>{{ formatValue(item.otherChargesThree) }}</td>
            <td>{{ formatValue(item.otherChargesFour) }}</td>
          </tr>
        </table>
      </div>
    </div>
  </PopCommon>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'HighRewardTable',
  data() {
    return {
      showPop: false,
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      highRewards: 'varietyInfo/highRewards',
    }),
    getPolicyTimer() {
      let res = '';
      if (this.highRewards.length > 0) {
        res = this.highRewards[0].startDate;
      }
      return res;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    formatValue(value) {
      let res = "-";
      if (value > 0) {
        const val = (value * 100).toFixed(0);
        res = `${val}%`;
      }
      return res;
    },
    initModule() {
      if (this.highRewards.length === 0) return this.$toast('暂无配置相关数据');
      this.showPop = true;
    },
  },
};
</script>

<style lang="less" scoped>
.pop_box {
  padding: 0 10px;

  p {
    padding-left: 10px;
  }
}
.table_box {
  border-radius: 10px;
  border: 1px solid rgba(226, 223, 214, 1);
  margin-top: 10px;

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th {
    font-weight: normal;
    padding: 5px 0;
    background-color: rgba(255, 244, 232, 1);
    font-size: 12px;
    color: rgba(99, 68, 35, 1);
    text-align: center;
  }

  td {
    font-size: 12px;
    line-height: 15.91px;
    color: rgba(99, 68, 35, 1);
    text-align: center;
    padding: 5px 0;
  }
}
</style>
